<!doctype html>
<html class="x-admin-sm" lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
    <th:block th:include="template/header::header"></th:block>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">系统管理</a>
            <a href="">用户管理</a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="nickname" placeholder="请输入昵称" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','./member-add.html',600,400)"><i
                            class="layui-icon"></i>添加
                    </button>
                </div>


                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form" id="table"></table>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="operate">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            table = layui.table;
        var tableIndex;

        // 监听全选
        form.on('checkbox(checkall)', function (data) {

            if (data.elem.checked) {
                $('tbody input').prop('checked', true);
            } else {
                $('tbody input').prop('checked', false);
            }
            form.render('checkbox');
        });

        //实时监听input输入框,更新table
        $("input[name=username]").on("input", function () {
            //  具体代码
            let username = $("input[name=username]").val();
            let nickname = $("input[name=nickname]").val();
            if (username == '') {
                loadTable(baseUrl + "/user/list", {username: username, nickname: nickname})
            }

        });
        $("input[name=nickname]").on("input", function () {
            //  具体代码
            let username = $("input[name=username]").val();
            let nickname = $("input[name=nickname]").val();
            if (nickname == '') {
                loadTable(baseUrl + "/user/list", {username: username, nickname: nickname})
            }

        });

        //加载页面数据
        loadTable(baseUrl + "/user/list")


        //搜索
        form.on('submit(search)', function (data) {
            loadTable(baseUrl + "/user/list", {username: data.field.username, nickname: data.field.nickname})
            return false;
        })

        //监听行工具事件
        table.on('tool(table)', function (obj) {
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    del(obj.data.id, "${pageContext.request.contextPath}/system/user/del")
                });
            } else if (obj.event === 'edit') {
                xadmin.open('编辑用户', '${pageContext.request.contextPath}/system/user-edit?id=' + obj.data.id, 600, 600)
            }
        });

        //动态更新页面数据
        function loadTable(url, data) {
            tableIndex = table.render({
                elem: '#table',
                url: url,//数据接口
                where: data,
                // 对我们请求过来的数据进行一次预处理
                parseData(res) {
                    if (res.success) {
                        return {
                            "code": 0, //解析接口状态, 等于0代表成功
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.list//解析数据列表
                        }
                    } else {
                        layer.msg(res.msg);
                        return {
                            "code": res.code, //解析接口状态, 等于0代表成功
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.list//解析数据列表
                        }
                    }
                },
                request: {
                    //页码的参数名称，默认：page，指定了页码的key
                    pageName: 'pageNum',
                    // 指定了每页容量的key
                    limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                page: true, //开启分页
                cols: [
                    [ //表头
                        {type: 'checkbox'},
                        {field: 'id', title: '用户编号'},
                        {field: 'username', title: '用户名'},
                        {field: 'password', title: '密码'},
                        {field: 'nickname', title: '昵称'},
                        {field: 'age', title: '年龄'},
                        {field: 'birthday', title: '生日'},
                        {field: 'schoolName', title: '学校'},
                        {title: '操作', toolbar: '#operate', width: 150}
                    ]
                ]
            });
        }


    });


    //删除
    function del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $.get("/user/del", {id: id}, function (res) {
                if (res.success) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                } else {
                    layer.msg('删除失败', {icon: 2, time: 1000});
                }
            })
        });
    }

    //批量删除
    function delAll() {
        var ids = [];

        // 获取选中的id 
        $('tbody input').each(function (index, el) {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });

        console.log(ids)

        // layer.confirm('确认要删除吗？' + ids.toString(), function (index) {
        //     //捉到所有被选中的，发异步进行删除
        //     layer.msg('删除成功', {icon: 1});
        //     $(".layui-form-checked").not('.header').parents('tr').remove();
        // });
    }


</script>
</html>